<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    
</head>
<body>
    <div id="Application" style="text-align: center;">
        <h1>{{title}}</h1>
        <div v-if="noLogin">账号：<input v-model="userName" type="text"></div>
        <div v-if="noLogin">密码：<input v-model="password" type="text"></div>
        <div v-on:click="click" style="border-radius: 30px;width: 100px;margin: 20px auto;color: white;
        background-color: blue;">{{buttonTitle}}</div>
    </div>
</body>
  <script>
    const App = {
        data(){
            return{
                title:"欢迎您：未登录",
                noLogin:true,
                userName:"",
                password:"",
                buttonTitle:"登录",
            }
        },
        methods:{
            click(){
                if(this.noLogin){
                    this.login()
                }else{
                    this.logout()
                }
            },
            login(){
                //判断账号密码是否为空
                if(this.userName.length>0 && this.password.length>0){
                    //登录提示后刷新页面
                    alert('userName:${this.userName} password:${this.password}')
                    this.noLogin=false
                    this.title = '欢迎您:${this.userName}'
                    this.buttonTitle='注销'
                    this.userName=""
                    this.password=""
                }else{
                    alert('请输入账号和密码')
                }
            },
            //登出
            logout(){
                //清空登录数据
                this.noLogin = true
                this.title  = '欢迎您:未登录'
                this.buttonTitle="登录"
            }
        }
    }
    Vue.createApp(App).mount("#Application")
</script>
</html>